<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getCodeAPI, loginAPI} from '@/api/user'
import { Toast } from 'vant';
import { userStore } from '@/store/user'

const store = userStore()
const router = useRouter()
const state = reactive({
    checked: true,
    accounts: '13321178501',
    code: '',
    codeText: '获取验证码',
    time: 60,
    interTimeCode: null
})
// 获取验证码
const getCodeChange = async() => {
    // 倒计时判断
    if (state.interTimeCode) return
    const res = await getCodeAPI({
        accounts: state.accounts
    })
    if (res) {
        //验证码倒计时
        state.interTimeCode = setInterval(() => {
            state.time -- 
            if (state.time <= 0 ) {
                clearInterval(state.interTimeCode)
                state.time = 60
                state.codeText = '获取验证码'
            }else{
                state.codeText = '重新发送('+state.time+'s)'
            }
            //填充验证码
            state.code = res.code
        }, 1000);
    }
}

// 点击登录
const loginSubmit = async() => {
    if (!state.code) {
        Toast('请输入验证码')
        return
    }
    if (!state.checked) {
        Toast('请勾选我已阅读')
        return
    }
    const res = await loginAPI({
        accounts: state.accounts,
        code: state.code
    })
    // 判断是否登陆成功
    if (res.errCode == 200) {
        // 登录成功后需要把登录返回的数据存到store
        store.setUserInfo(res.data)
        // 进入人才端
        if (store.state.role == 1) {
            router.push('/task')
        }
        // 进入企业端
        if (store.state.role == 2) {
            router.push('/talent')
        }
    }else{
        Toast(res.msg)
    }
}

// 点击返回
const onClickLeft = () => history.back()
</script>

<template>
    <div>
        <van-icon name="arrow-left" class="icon-left" @click="onClickLeft"/>
        <div class="login-form">
            <h3>验证码登录</h3>
            <div class="login-form-item">
                <i class="icon-phone"></i>
                <input type="text" placeholder="请输入手机号" v-model="state.accounts">
            </div>
            <div class="login-form-item">
                <i class="icon-code"> </i> 
                <input type="text" placeholder="请输入验证码" v-model="state.code">
                <span @click="getCodeChange">{{ state.codeText }}</span>  
            </div>
            <van-button type="primary" block @click="loginSubmit">登录</van-button>
            <div class="login-form-label">
                <van-checkbox v-model="state.checked">我已阅读</van-checkbox>
                <router-link to="/login/serviceAgree">《IT企业平台服务协议》</router-link>和
                <router-link to="/login/privacyPolicy">《隐私政策》</router-link>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-form {
    padding: 0 1.07rem;
}
.login-form h3 {
    font-size: 1.39rem;
    line-height: 1.39rem;
    font-weight: 400;
    color: #333;
    margin-top: 2.35rem;
    margin-bottom: 4rem;
    padding-left: 0.3rem;
}
.login-form-item {
    display: flex;
    font-size: 0.75rem;
    font-weight: 300;
    color: #9FA7AD;
    margin: 0 0.18rem 2rem;
    margin-bottom: 1px solid #E7E7E7;
    align-items: center;
}
.icon-code {
    background: url('@/assets/img/icon/icon-code.png') no-repeat;
    width: 1.01rem;
    height: 1.01rem;
    background-size: 100%;
}
.icon-phone {
    background: url('@/assets/img/icon/icon-phone.png') no-repeat;
    width: 1.01rem;
    height: 1.01rem;
    background-size: 100%;
}
.login-form-item input {
    flex: 1;
    margin-left: 0.48rem;
}
.login-form-item span {
    border-left: 1px solid #FE9527;
    font-weight: 300;
    font-size: 0.75rem;
    color: #FE9527;
    padding-left: 0.56rem;
    line-height: 0.75rem;
}
.login-form-label {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 1.5rem;
    left: 0;
    width: 100%;
}
.icon-left {
    font-size: 0.9rem;
    margin: 0.67rem 0 0 0.55rem;
}
</style>